<template>
  <div> 主键演示 </div>
  <div
    >组件的属性演示<input type="text" v-model="comp_info" />
    {{ comp_info }}</div
  >
  <hr />
  <!-- @自定义事件就是监听事件 -->
  <MyComp :myprop="comp_info" @myevent="myhandle">
    <template #default> <div>无敌暴龙战士</div></template>

    <template #fixed>
      <div>蕴含霜</div>
    </template>
  </MyComp>
  <hr />
  <my-comp>
    <div>风灵烟</div>
  </my-comp>
</template>

<script setup>
import { ref } from 'vue';
import MyComp from '../../components/MyComp.vue';

const comp_info = ref('传给组件的变量');
//监听组件自定义的事件
const myhandle = (info) => {
  console.log('监听到组件事件:', info);
};
</script>

<style scoped></style>
